<template>
  <footer>
    <div class="top dis-flex">
      <div class="topItem flex-box">
        <div class="toptitle col-f">网站导航</div>
        <ul class="nav flex-row mb-18" v-for="item in newLinkList" :key="item.title">
          <li class="navItem col-f b-r-c" v-for="itemf in item" :key="itemf.title">
            <NuxtLink :to="{ path: itemf.jump_url }">{{ itemf.title }}</NuxtLink>
          </li>
        </ul>

      </div>
      <div class="bar"></div>
      <div class="topItem flex-box flex-y  flex-y-center">
        <div>
          <div class="toptitle col-f ">联系我们</div>
          <div class="lxBox flex-row">
            <div class="flex-row">
              <img class="imgBox" src="https://picsum.photos/200/300" />
              <div class="flex-y">
                <div class="txt1">{{ settingData.setting.company.tel }}</div>
                <div class="txt2">{{ settingData.setting.company.working_time }}</div>
              </div>
            </div>
            <a :href="settingData.setting.company.qq_link" class="flex-row mlrem3">
              <img class="imgBox" src="https://picsum.photos/200/300" />
              <div class="flex-y">
                <div class="txt1">QQ在线咨询</div>
                <div class="txt2">24小时在线为您服务</div>
              </div>
            </a>

          </div>
        </div>

      </div>
      <div class="bar"></div>
      <div class="topItem  flex-box flex-y flex-x-center flex-y-center">
        <div>
          <div class="toptitle col-f ">关注我们</div>
          <div class="dis-flex">
            <div class="flex-y flex-y-center">
              <img class="imgBox1" :src="settingData.setting.company.wechat_qrcode" />
              <span class="txt21">微信公众号</span>
            </div>

            <div class="flex-y flex-y-center mlrem2">
              <img class="imgBox1" :src="settingData.setting.company.sina_weibo_qrcode" />
              <span class="txt21">新浪微博</span>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="bottom dis-flex flex-x-center flex-y-center t-c">
      {{ settingData.setting.company.icp_no }}
    </div>
  </footer>
</template>

<script setup name="tabs">
import serverRequest from '~/composables/useServerRequest';

const settingData = await serverRequest.get('home/setting');
const route = useRoute();
</script>

<style lang="scss" scoped>
footer {
  padding: 0 0 0;
  background: #282e31;

  .top {
    padding: 0.6rem 1.2rem 0.2rem;
    border-bottom: 1px solid #3c4144;

    .toptitle {
      padding-bottom: 7.6px;
      position: relative;
      font-size: 0.16rem;
      margin-bottom: 18px;
    }

    .nav {
      .navItem {
        font-size: 0.14rem;
        color: #707070;
        padding-right: 0.4rem;
      }

      .b-r-c {
        border-right: 1px solid #3f484c;
      }

      .m-l-c {
        margin-left: 0.4rem;
      }
    }

    .bar {
      background-color: #3c4144;
      height: 0.7rem;
      width: 1px;
      margin: auto 0;
    }

    .toptitle::after {
      position: absolute;
      content: "";
      width: 0.2rem;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #fff;
    }

    .lxBox {
      color: #707070;

      .imgBox {
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 11px;
        display: block;
      }

      .txt1 {
        font-size: 0.15rem;
        font-weight: bold;
      }

      .txt2 {
        font-size: 0.14rem;
      }
    }

    .mlrem3 {
      margin-left: 0.3rem;
    }

    .mlrem2 {
      margin-left: 0.2rem;
    }

    .imgBox1 {
      width: 0.9rem;
      height: 0.9rem;
      margin-bottom: 11px;
    }

    .txt21 {
      font-size: 0.14rem;
      color: #707070;
    }
  }

  .bottom {
    padding: 0.3rem;
    font-size: 0.15rem;
    color: #707070;
  }
}
@media screen and (max-width: 768px) {
  
  footer {
    .top {
      display: none !important;
    }
  }
}

</style>